<template>
	<div class="login">
		<Header></Header>
		<section>
				<div class="login-tel">
					<input type="text" v-model="userTel" placeholder="请输入手机号码" pattern="[0-9]" />
				</div>
				<div class="login-tel">
					<input type="text" v-model="userPwd" placeholder="请输入密码"/>
				</div>
				<div class="login-btn" @click="login">登录</div>
				<div class="tab">
					<span @click="goLogin">短信登录</span>
					<span @click="goRecovery">找回密码</span>
					<span @click="goRegister">快速注册</span>

				</div>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
import  Tabbar  from "@/components/common/Tabbar.vue";
import  Header  from "@/views/login/Header.vue";
import { Toast } from 'mint-ui';
import http from '@/common/api/request.js';
import {mapMutations} from 'vuex';
export default{
	data(){
		return{
			userTel:'',//用户输入的手机号、密码
			userPwd:'',
			rules:{
				//手机号验证规则
				userTel:{
					rule:/^1[23456789]\d{9}$/,
					msg:'手机号不能为空,并且是11位数字'
				},
				//密码验证规则
				userPwd:{
					// 密码至少为八个字符,并且至少有一个字母和一个数字
					// rule:/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
					rule:/^\w{6,12}$/,
					msg:'密码不能为空,并且要求6-12位',
				}
			}
		}
	},
	components: {
		Tabbar,
		Header,
	},
	methods:{
		...mapMutations(['userLogin']),
		//点击登录按钮
		login(){
			//前端验证
			if( !this.validate('userTel')) return;
			if( !this.validate('userPwd')) return;
			//发送请求，后端验证
			http.$axios({
				url:'/api/login',
				method:'POST',
				data:{
					userTel:this.userTel,
					userPwd:this.userPwd,
				}
			}).then(res=>{
				//提示信息
				Toast(res.msg);
				//登录失败
				if( !res.success) return;
				//登录成功，跳转页面,存储用户信息 保存到vuex中
				this.userLogin( res.data );
				//跳转到我的页面中
				this.$router.push({
					path:'/my'
				})

			})
		},
		//跳转到快捷注册
		goRegister(){
			this.$router.push('/register');
		},
		//跳转到找回密码
		goRecovery(){
			this.$router.push('/recovery');
		},
		//密码登录
		goLogin(){
			this.$router.push('/login');
		},
		//验证信息提示
		validate( key ){
			let bool = true;
			if( !this.rules[key].rule.test( this[key]) ){
				//提示信息
				Toast(this.rules[key].msg);
				bool = false;
				return false;
			}
			return bool;
		},
		
		
	},
}
</script>

<style scoped>
.login{
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
section{
	display: flex;
	flex-direction: column;
	background-color: #f5f5f5;
	
	align-items: center;
}
section div{
	margin: 0.625rem 0;
	width: 20.9375rem;
	height: 2.75rem;
	/* font-size: 0.75rem; */
	
}
.login-tel{
	margin-top: 1.25rem;
}
.login-tel input{
	width: 100%;
}
input{
	box-sizing: border-box;
	padding: 0 0.625rem;
	background-color: #fff;
	line-height: 2.75rem;
	border: 0.0625rem solid #ccc;
	border-radius: 0.375rem;
	
	
}
.login-code {
	display: flex;	
}
.login-code input{
	flex: 1;
}
.login-code button{
	padding: 0 1.25rem;
	line-height: 2.75rem;
	color: #fff;
	background-color: green;
	border: 0;
	border-radius: 0.375rem;
}
.login-btn{
	line-height: 2.75rem;
	color: #fff;
	text-align: center;
	/* font-size: 1.125rem; */
	background-color: green;
	border-radius: 0.375rem;
	
}
.tab{
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem
}
</style>